﻿import QtQuick 2.0


//image 只支持静态图片，如果时动态图，需要用AnimatedSprite或者AnimatedImage

//如果没有设置width 和height 会使用图片本身的尺寸，如果设置了，那么就会被拉伸来使用尺寸
// fillMode 可以设置填充模式，支持Image.Stretch(拉伸) Image.PreserveAspectFit(等比缩放）
// Image.PreserveAspectCrop( 必要时裁剪图片等比缩放，最大化填充Image
// image.preserveAspectceop(等比缩放，最大化填充Image，
// image.Tile(在水平和垂直两个方向平铺，就像贴瓷砖那样）
// image.TileVerticall(垂直平铺）
// image.TileHorizontally(水平平铺）
// image.Pad(保持图片原样不做变换)

//image 默认阻塞方式加载图片， 如果图片太小，则没有什么问题，可以设置asynchronuos属性为true开启异步加载模式，
//没加载完你可以显示一个等待图标之类的小玩意来告诉他需要等会，
// 当stsatus（枚举值）的值为Image.Ready时再隐藏加载等候界面

// Image支持从网络加载图片， 它的source属性类型是url， 可以接受qt支持的任意一种网络协议，当image为 网络资源时
//会自动启动异步加载模式。此时image的progress(取值范围0.0~1.0)， status (枚举值) 都会适应更新，你可以判断何时结束加载等候提示界面

import QtQuick.Controls 1.2

//加载本地图片
//Image {

//    source: "image/yourimage.png";

//}

//加载网络图片

Rectangle{
    width: 480;
    height: 320;
    color: "#121212";

    BusyIndicator{
        id: busy;
        running: true;
        anchors.centerIn: parent;
        z:2;
    }
    Text{
        id: stateLabel;
        visible: false;
        anchors.centerIn: parent;
        z:3;

    }
    Image{
        id:imageViewer;
        asynchronous: true;//虽然设置了这个属性，但是网络资源时异步加载，这个属性不起作用
        cache:false; //不需要缓存
        anchors.fill: parent;
        fillMode: Image.PreserveAspectFit; //保护方向适应== 等比缩放

        onStatusChanged: { //信号
            if(imageViewer.status === Image.Loading){
                busy.running = true;
                stateLabel.visible = false;
            }
            else if(imageViewer.status === Image.Ready){
                busy.running = false;
            }
            else if( imageViewer.state === Image.Error){
                busy.running = false;
                stateLabel.visible = true;
                stateLabel.text = "ERROR";
            }
        }
    }

    Component.onCompleted: {
        imageViewer.source = "http://img.hb.aicdn.com/0d7d24590b486e66f2935f19369e6c6e2267c2d513363-6bNjYS_fw658";
    }
}
